<template>
  <div class="orderItem">
    <div class="top">
      <div class="store_name">{{ item.storeName }}</div>
      <div class="serve_type">{{ type!=4 ? getTypeName :getAfterSaleTypeName(item.serviceStatus) }}</div>
    </div>
    <template v-if="type == 4">
      <div class="info">
        <div class="info_left">
        <van-image class="left_icon" :src="item.goodsImage" />
        <div class="serve_name van-multi-ellipsis--l2">
          {{ item.goodsName }}
        </div>
      </div>
      <div class="info_right">
        <div class="right_price">￥{{ item.flowPrice }}</div>
        <div class="right_num">x{{ item.num }}</div>
      </div>
      </div>
    </template>
    <template v-else>
      <div v-for="(v, i) in item.orderItems" :key="i" class="info">
      <div class="info_left">
        <van-image class="left_icon" :src="v.image" />
        <div class="serve_name van-multi-ellipsis--l2">
          {{ v.goodsName }}
        </div>
      </div>
      <div class="info_right">
        <div class="right_price">￥{{ v.skuPrice }}</div>
        <div class="right_num">x{{ v.num }}</div>
      </div>
    </div>
    </template>
    <div class="price">
      {{ type == 0 ? "应付款" : "实付款" }}：￥{{ type==4 ? item.flowPrice : totalPrice  }}
    </div>
    <div class="btn">
      <van-button v-if="item.allowOperationVO?.pay" round class="pay" @click.stop="pay">立即付款</van-button>
      <van-button v-if="item?.allowOperationVO?.cancel" round class="pay" @click.stop="cancleOrder">取消订单</van-button>
      <van-button v-if="item?.allowOperationVO?.evaluate" round class="comment" @click.stop="goComment">去评价</van-button>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import { Decimal } from "decimal.js";
export default {
  name: "orderItem",
  components: {},
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
    type: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      totalPrice: 0,
    };
  },
  watch: {},
  computed: {
    getTypeName() {
      if (this.type == 0) {
        return "待付款";
      } else if (this.type == 1) {
        return "支付中";
      } else if (this.type == 2) {
        return "已付款";
      } else if (this.type == 3) {
        return "退款中";
      } else if (this.type == 11) {
        return "待自提";
      } else if (this.type == 21) {
        return "待发货";
      } else if (this.type == 22) {
        return "待收货";
      } else if (this.type == 31) {
        return "待核销";
      } else if (this.type == 8) {
        return "待评价";
      } else if (this.type == 4) {
        return "待退款";
      } else if (this.type == 99) {
        return "已取消";
      } else if (this.type == 100) {
        return '已完成'
      }
      return "";
    },
    getAfterSaleTypeName() {
      return function (type) {
        if (type == 0) {
        return "申请中";
      } else if (type == 11) {
        return "已通过";
      } else if (type == 12) {
        return "已拒绝";
      } else if (type == 13) {
        return "待卖家收货";
      } else if (type == 14) {
        return "卖家确认收货";
      } else if (type == 15) {
        return "卖家终止售后";
      } else if (type == 1) {
        return "买家取消售后";
      } else if (type == 16) {
        return "等待平台退款";
      } else if (type == 100) {
        return "已完成";
      }
      return "";
      }
    }
  },
  methods: {
    goComment() {
      this.$router.push({
        path: "/comment",
        query: {
          sn: this.item.sn,
          orderItemSn: this.item.orderItems[0].sn
        }
      });
    },
    async pay() {
      this.$toast.loading('加载中')
      let res = await api.pay({
        sn: this.item.sn
      })
      this.$toast.clear()
      if (res) {
        window.location.href = res;
      } else {
        this.$toast.fail({
          message: "支付失败",
        });
      }
    },
    async cancleOrder() {
      await api.cancleOrder({
        orderSn: this.item.sn
      })
      this.$toast('取消订单成功')
      this.$emit('refresh')
    }
  },
  created() { },
  mounted() {
    if (this.type != 4) {
      let totalPrice = new Decimal(String(this.totalPrice));
    this.item.orderItems.forEach((e) => {
      let ePrice = new Decimal(String(e.subTotal));
      totalPrice = totalPrice.plus(ePrice);
    });
    this.totalPrice = totalPrice.toString();
    }
  },
};
</script>
<style lang="less" scoped>
.orderItem {
  width: 100%;
  padding: 30px 50px;
  border-bottom: 3px solid #f1f1f1;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .store_name {
      max-width: 730px;
      font-size: 50px;
      font-weight: bold;
    }

    .serve_type {
      font-size: 40px;
      color: #406dfc;
    }
  }

  .info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 20px;

    .info_left {
      display: flex;
      align-items: flex-start;

      .left_icon {
        width: 200px;
        height: 200px;
      }

      .serve_name {
        font-size: 40px;
        color: #888888;
        margin-left: 30px;
        max-width: 700px;
      }
    }

    .info_right {

      .right_price,
      .right_num {
        font-size: 40px;
        color: #888;
        text-align: right;
      }
    }
  }

  .price {
    width: 100%;
    text-align: right;
    font-size: 46px;
    color: #333333;
  }

  .btn {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;

    .pay,
    .comment {
      height: 95px;
      border: unset;
      color: #fff;
      margin: 0 0 0 15px;
    }

    .pay {
      background: linear-gradient(to right, #0160ea, #00bffa);
    }

    .comment {
      background: linear-gradient(to right, #f28c43, #ffb11d);
    }
  }
}
</style>